<template>
  <!-- 合同初稿 -->
    <CommonTitle
            :titleName="state.type == 1 ? '招标合同协同审批' : '合同初稿'"
    ></CommonTitle>

    <div class="box">
        <el-form
                :inline="true"
                label-width="140"
                :model="formInline"
                :rules="rules"
                ref="formRef"
                class="demo-form-inline"
        >
            <el-row>
                <el-col :span="8" v-if="state.disabled">
                    <el-form-item label="审核编号">
                        <el-input
                                v-model="formInline.flowId"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="state.disabled">
                    <el-form-item label="审核状态">
                        <el-select v-model="formInline.examineStatus" disabled>
                            <el-option
                                    v-for="item in state.auditStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="state.disabled">
                    <el-form-item label=" ">
                        <el-button
                                type="primary"
                                @click="openHandler(formInline.routeUrl)"
                                class="button_edit"
                        >查看流程审批</el-button
                        >
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="关联项目集">
                        <el-input
                                v-model="formInline.projectSetName"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目集编号">
                        <el-input
                                v-model="formInline.projectSetCode"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目立项部门">
                        <el-input
                                v-model="formInline.departmentName"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="关联项目">
                        <el-input
                                v-model="formInline.projectName"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目编号">
                        <el-input
                                v-model="formInline.projectId"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目负责人">
                        <el-input
                                v-model="formInline.responsibleUserName"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="关联任务">
                        <el-input
                                v-model="formInline.projectTask"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="任务编号">
                        <el-input
                                v-model="formInline.projectTaskCode"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目阶段">
                        <el-input
                                v-model="formInline.projectStage"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工作细项名称">
                        <el-input v-model="formInline.workName" disabled placeholder="" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="任务来源">
                        <el-input v-model="formInline.taskScore" disabled placeholder="" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="签订份数">
                        <el-input
                                v-model.number="formInline.signNumber"
                                :disabled="state.disabled"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="项目分类">
                        <el-input
                                v-model="formInline.projectType"
                                disabled
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="合同签约方式">
                        <el-select
                                disabled
                                v-model="formInline.signingMethod"
                                placeholder=""
                        >
                            <el-option
                                    v-for="item in selectionTypeOptions"
                                    :key="item"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同履约期限" prop="serviceStartTime">
                        <el-date-picker
                                :disabled="state.disabled"
                                v-model="formInline.serviceTimeValue"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD hh:ss:mm"
                                @change="serviceTimeChange"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="合同名称" prop="contractName">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractName"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同类型" prop="typeContract">
                        <el-select
                                :disabled="state.disabled"
                                v-model="formInline.typeContract"
                                placeholder=""
                        >
<!--                            <el-option label="招标合同" :value="1" />-->
                            <el-option label="投资合同" :value="2" />
<!--                            <el-option label="建设合同" :value="3" />-->
<!--                            <el-option label="其他合同" :value="4" />-->
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同编码" prop="contractNumber">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractNumber"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="甲方单位" prop="signPartyA">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.signPartyA"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="乙方单位" prop="signPartyB">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.signPartyB"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="三方单位" prop="signPartyThree">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.signPartyThree"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同总额" prop="contractAmount">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractAmount"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="质保期" prop="warrantyExplain">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.warrantyExplain"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                  <el-form-item label="资金流向">
                    <el-select
                      :disabled="state.disabled"
                      v-model="formInline.capitalFlow"
                      placeholder=""
                    >
                      <el-option label="流入" :value="'1'" />
                      <el-option label="流出" :value="'2'" />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="8">
                    <el-form-item label="合同签订日期" prop="signTime">
                        <el-date-picker
                                v-model="formInline.signTime"
                                type="date"
                                :disabled="state.disabled"
                                value-format="YYYY-MM-DD HH:mm:ss"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同性质" prop="capitalFlow">
                        <el-select
                            v-model="formInline.capitalFlow"
                            value-key=""
                            :disabled="state.disabled"
                            placeholder="合同性质"
                            clearable
                        >
                            <el-option
                                label="收款合同"
                                value="1"
                            >
                            </el-option>
                            <el-option
                                label="付款合同"
                                value="2"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同结算方式" prop="contractSettlementType">
                        <el-select
                                v-model="formInline.contractSettlementType"
                                value-key=""
                                :disabled="state.disabled"
                                placeholder="请输入合同结算方式"
                                clearable
                        >
                            <el-option
                                    label="包干总价"
                                    value="1"
                            >
                            </el-option>
                            <el-option
                                    label="按实计算"
                                    value="2"
                            >
                            </el-option>
                            <el-option
                                    label="按实核算"
                                    value="3"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="合同内容" prop="contractContent">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractContent"
                                type="textarea"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="支付方式" prop="payExplain">
                        <el-input
                                v-model="formInline.payExplain"
                                type="textarea"
                                :disabled="state.disabled"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" >
                        <el-input
                                v-model="formInline.remark"
                                :disabled="state.disabled"
                                type="textarea"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="合同附件" prop="files">
                        <FileMinioUpload
                                :restriction="true"
                                :disabled="state.disabled"
                                :restrictionLimit="9"
                                @updateFiles="updateFiles"
                                v-model:files="formInline.files"
                                :show-button="!state.disabled"
                        />
                    </el-form-item>
                </el-col>
<!--                <el-col :span="5" v-if="isLook === '0' || isLook === '2'">
                    <el-form-item label="期数">
                        <el-input
                                :disabled="state.disabled"
                                v-model="state.payItem.term"
                                placeholder="请输入期数"
                        />
                    </el-form-item>
                </el-col>-->
<!--                 <el-col :span="5" v-if="isLook === '0' || isLook === '2'">
                  <el-form-item label="资金流向">
                    <el-select
                      :disabled="state.disabled"
                      v-model="state.payItem.moneyFlowType"
                      placeholder=""
                    >
                      <el-option label="流入" :value="1" />
                      <el-option label="流出" :value="2" />
                    </el-select>
                  </el-form-item>
                </el-col>-->
<!--                <el-col :span="7" v-if="isLook === '0' || isLook === '2'">
                    <el-form-item label="付款范围">
                        <el-date-picker
                                v-model="state.payItem.settlementStartTime"
                                type="daterange"
                                :disabled="state.disabled"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>-->
<!--                <el-col :span="5" v-if="isLook === '0' || isLook === '2'">
                    <el-form-item label="金额">
                        <el-input
                                :disabled="state.disabled"
                                v-model="state.payItem.payableAmount"
                                placeholder="金额"
                        />
                    </el-form-item>
                </el-col>-->
<!--                <el-col :span="2" v-if="isLook === '0' || isLook === '2'">
                    <el-form-item label="">
                        <el-button class="m-l20" @click="addRow">添加结算方式</el-button>
                    </el-form-item>
                </el-col>-->
<!--                <el-col :span="24">
                    <el-form-item label="合同结算方式"> </el-form-item>
                    <tableCom
                            class="table_class"
                            :tableHead="tableHead"
                            :tableData="tableData"
                            :isRadio="false"
                            :isIndex="false"
                            border
                            :height="300"
                            :isSelection="false"
                    >
                        <template #operate>
                            <el-table-column label="操作" width="200">
                                <template #default="{ row }">
                                    <el-button
                                            :disabled="isLook == 1"
                                            size="small"
                                            type="primary"
                                            @click="deleteHandler(row)"
                                    >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </template>
                    </tableCom>
                </el-col>-->

                <el-col :span="24" >
                    <CommonTitle  titleName="其他信息"></CommonTitle>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="申请人">
                        <el-input disabled v-model="formInline.createName" placeholder="" />
                    </el-form-item>
                </el-col>

                <el-col :span="8" >
                    <el-form-item label="申请部门">
                        <el-input

                                disabled
                                v-model="formInline.createDepartmentName"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="创建时间">
                        <el-input

                                disabled
                                v-model="formInline.createTime"
                                placeholder=""
                        />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="24" v-if="state.disabled">
                  <el-form-item label="查看审批流程">
                    <el-button type="primary" @click="openHandler(formInline.routeUrl)">查看审批流程</el-button>
                  </el-form-item>
                </el-col> -->
            </el-row>
        </el-form>

        <span class="dialog-footer" v-if="isLook==='0' || isLook==='2'">
      <el-button @click="submit" class="button_view">发起审批</el-button>
      <el-button type="primary" @click="goback" class="button_cancel2"> 取消 </el-button>
    </span>
    </div>
</template>

<script setup>
import { contractApi, department } from '@/api/project'

import { ref, reactive, onBeforeMount, onMounted } from 'vue'
import {
    ElDialog,
    ElMessage,
    ElDatePicker,
    ElRow,
    ElCol,
    ElForm
} from 'element-plus'
import CommonTitle from '@/components/CommonTitle.vue'
import { useRouter, useRoute } from 'vue-router'
import FileMinioUpload from "@/components/FileMinioUpload.vue";
import {
    nanoid
} from '@/views/constructionProjectManage/static/utools.js'
import {taskApi} from "@/api/investment";
import {selectionTypeOptions} from "@/common/dict/dictCollect";

let router = useRouter()
let route = useRoute()


const getProjectId = router.currentRoute.value.params.projectId;
const getProjectTaskId = router.currentRoute.value.params.projectTaskId;
const getItemId = router.currentRoute.value.params.itemId;
const getType = router.currentRoute.value.params.type;
const isLook = router.currentRoute.value.params.isLook;

const state = reactive({
    auditStatus: [
        {
            label: '待审核',
            value: '1'
        },
        {
            label: '审核成功',
            value: '2'
        },
        {
            label: '审核驳回',
            value: '3'
        }
    ],
    user: '',
    projectTaskId: '',
    projectId: '',
    itemId: '',
    type: getType,
    payItem: {
        term: '',
        moneyFlowType: '',
        settlementStartTime: [],
        payId: nanoid()
    },
    disabled: false
})
const formInline = reactive({
    files: [],
    examineStatus:'1',
    approvalFormCode: '', //审核结果相关字段
    apparovalStatus: '', //审核结果相关字段
    serviceTimeValue:[]
})
const rules = {
    contractSettlementType: [
        { required: true, message: '合同结算方式不能为空', trigger: 'change' }
    ],
    capitalFlow: [
        { required: true, message: '合同性质不能为空', trigger: 'blur' }
    ],
    contractName: [
        { required: true, message: '合同名称不能为空', trigger: 'blur' }
    ],
    typeContract: [
        { required: true, message: '合同类型不能为空', trigger: 'blur' }
    ],
    contractNumber: [
        { required: true, message: '合同编号不能为空', trigger: 'blur' }
    ],
    signPartyA: [
        { required: true, message: '签约甲方不能为空', trigger: 'blur' }
    ],
    signPartyB: [
        { required: true, message: '签约乙方不能为空', trigger: 'blur' }
    ],

    contractAmount: [
        { required: true, message: '合同金额不能为空', trigger: 'blur' }
    ],

    serviceStartTime: [
        { required: true, message: '服务期限不能为空', trigger: 'blur' }
    ],
    signTime: [
        { required: true, message: '合同签订日期不能为空', trigger: 'blur' }
    ],
    contractContent: [
        { required: true, message: '合同内容不能为空', trigger: 'blur' }
    ],
    payExplain: [
        { required: true, message: '支付方式不能为空', trigger: 'blur' }
    ],
    remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
    files: [{ required: true, message: '附件不能为空', trigger: 'blur' }]
}
// 1, "公开招标
// 2, "公开竞争性谈判
// 3, "公开竞争性磋商
// 4, "择优比选"
// 5, "单一来源采购
// 6, "邀请竞争性谈判
// 7, "邀请竞争性磋商
// 8, "择优询价"
// 9, "单一来源采购
const projectTendersWayList = reactive([
    {
        label: '公开招标',
        value: '1'
    },
    {
        label: '公开竞争性谈判',
        value: '2'
    },
    {
        label: '公开竞争性磋商',
        value: '3'
    },
    {
        label: '择优比选',
        value: '4'
    },
    {
        label: '单一来源采购',
        value: '5'
    },
    {
        label: '邀请竞争性谈判',
        value: '6'
    },
    {
        label: '邀请竞争性磋商',
        value: '7'
    },
    {
        label: '择优询价',
        value: '8'
    },
    {
        label: '单一来源采购',
        value: '9'
    }
])
const tableData = ref([])
// term: '',
//     moneyFlowType: 0,
//     settlementStartTime: [],
//     payId: nanoid()
const tableHead = ref([
    {
        prop: 'term',
        label: '期数'
    },
    {
        prop: 'moneyFlowType',
        label: '资金流向',
        formatter:(row)=>{
            return ['','流入','流出'][row.moneyFlowType] || '-';
        }
    },
    {
        prop: 'settlementStartTime',
        label: '付款范围',
        formatter: (row) => {
            return row.settlementStartTime.join('-')
        }
    },
    {
        prop: 'payableAmount',
        label: '金额'
    }
])
const handel = () => {}
const deleteHandler = (row) => {
    tableData.value = tableData.value.filter((item) => item.payId !== row.payId)
}
const addRow = () => {
    state.payItem.payId = nanoid()
    tableData.value.push(JSON.parse(JSON.stringify(state.payItem)))
}
const goback = () => {
    router.go(-1)
}
const formRef = ref(null)
const submit = () => {

    formRef.value.validate(async (valid, fields) => {
        if (valid) {
            formInline.projectId = getProjectId
            formInline.tenderTaskId = getProjectTaskId
           /* if(tableData.value.length==0){
                ElMessage.error('请添加合同结算方式')
                return
            }*/
            let obj = JSON.parse(JSON.stringify(formInline))
            obj.serviceStartTime = formInline.serviceStartTime;
            obj.serviceEndTime = formInline.serviceEndTime;
            obj.itemId = getItemId
            obj.taskId = getProjectTaskId;
            obj.type = state.type;

            if(isLook === '2'){
                obj.id = formInline.id;
                obj.contractId = formInline.contractId;
            }


            obj.payList = []
            tableData.value.forEach((item) => {
                obj.payList.push({
                    term: item.term,
                    moneyFlowType: item.moneyFlowType,
                    settlementStartTime: item.settlementStartTime[0] + ' 00:00:00',
                    settlementEndTime: item.settlementStartTime[1] + ' 00:00:00',
                    payableAmount: item.payableAmount
                })
            })

            await taskApi.addContractDraft(obj).then((res) => {
                if (res.code == '200') {
                    ElMessage.success('操作成功')
                    router.go(-1)
                }
            })
        }
    })
}

const updateFiles = (e) => {

}

const openHandler=(url)=>{
    window.open(url)
}

/**
 * 时间选择
 */
const serviceTimeChange = (e) => {
  if(e && Array.isArray(e)){
      formInline.serviceStartTime = e[0];
      formInline.serviceEndTime = e[1];
  }
  if(!e){
      formInline.serviceStartTime = '';
      formInline.serviceEndTime = '';
  }
}

onMounted(() => {
    taskApi
        .getContractDraft({
            taskId: getProjectTaskId,
            itemId: getItemId,
            type: state.type,
            projectId: getProjectId
        })
        .then((res) => {
            if (res.code == '200') {
                for (const key in res.data) {
                    if (key == 'serviceStartTime') {
                        formInline['serviceTimeValue'] = [res.data[key], res.data['serviceEndTime']];
                        formInline['serviceStartTime'] = res.data[key];
                        formInline['serviceEndTime'] = res.data['serviceEndTime'];
                        continue
                    }
                    if (key == 'fileList') {
                        formInline['files'] = res.data[key] || []
                        continue
                    }
                    if (key == 'payList') {
                        if (res.data[key] && res.data[key].length > 0) {
                            res.data[key].forEach((item) => {
                                item.settlementStartTime = [
                                    item.settlementStartTime,
                                    item.settlementEndTime
                                ]
                            })
                            tableData.value = res.data[key]
                        } else {
                            tableData.value = []
                        }

                        continue
                    }
                    formInline[key] = res.data[key]


                }
            }
        })
})
</script>

<style lang="scss" scoped>
.el-form-item,
.el-select {
  width: 100%;
}
.box {
  border-radius: 10px;
  border: 1px solid #e3e7f1;
  padding: 34px 90px;
}
.table_class {
  margin-top: 20px;
  margin-bottom: 20px;
}
:deep(.el-input__wrapper) {
  width: 100%;
  height: 40px;
}
:deep(.el-date-editor) {
  width: 100%;
  height: 40px;
}
</style>
